<template>
  <div class="container login">
    <!-- <van-nav-bar
      title="登录"
      style="background-color:#f44;"
    /> -->
    <div class="login-com">
    <div class="user-pic-row">
      <img class="user-pic" src="@/assets/logo.jpg" alt="">
    </div>
    <div>
      <van-cell-group>
        <van-field
          label="手机号"
          placeholder="请输入手机号"
          v-model="phone"
           maxlength = '11'
        />
      </van-cell-group>
      <van-cell-group style="margin-top:10px;">
        <van-field
          label="密码"
          type="password"
          placeholder="密码"
          v-model="password"
        />
      </van-cell-group>
      <div class="login-btn-row">
        <van-button type="danger" class="login-btn" @click="userLogin">登录</van-button>
        <van-button type="primary" class="login-btn" @click="wChetLogin">微信登录</van-button>
      </div>
      <div style="text-align:right;font-size:14px;color:#999;padding:10px 10px 0 0;" >
        
        <div @click="toPage" v-if="userType==0">未有账号，去注册</div>
        <van-button v-else type="primary" class="re-btn" @click="wChetRegiest">未有账号，去注册</van-button>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'login',
  data() {
    return {
      phone:'', //18520488658  13222222222
      password:'',
      userType:0
    }
  },
  mounted() {
    let type = this.$route.query.userType;
    console.log('type');
    console.log(type);
    let redirect = this.$route.query.redirect;
    console.log(redirect);
    if(type){
      this.userType = type;
      if(this.userType == 0){
        document.title = '用户登录';
      }else{
        document.title = '店铺登录';
      }
    }
    if(type == localStorage.getItem("userType") && type == 1){
      console.log('zidong')
      let authorization = localStorage.getItem("authorization");
      if(authorization){
        this.$router.push({
            path: '/mine',
        })
        return;
      }
    }
    
  },
  methods: {   
    toPage(){
      this.$router.push({name: 'registered'})
      // if(this.userType == 0){
      // }else{
      //    this.$router.push({name: 'shopRegistered'})
      // }
    }, 
    wChetRegiest(){
      let url;
      if (this.env == 'test'){ // 测试
        url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxe320359a5af696ca&redirect_uri=https://easyget.vip/&response_type=code&scope=snsapi_userinfo&state=registered#wechat_redirect' //测试
      }else{
        // 生产
        url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx2f6f4717a5418aba&redirect_uri=https://jttdshgc.com/?registered=true/&response_type=code&scope=snsapi_userinfo&state=test#wechat_redirect'  //生产
      }
      window.location.href = url;
    },
    wChetLogin(){
      //localStorage.setItem("userType",this.userType);
      if(this.userType == 0){
         let url;
          if (this.env == 'test'){ // 测试
            url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxe320359a5af696ca&redirect_uri=https://easyget.vip/&response_type=code&scope=snsapi_userinfo&state=test#wechat_redirect'  //测试
          }else{
            url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx2f6f4717a5418aba&redirect_uri=https://jttdshgc.com/&response_type=code&scope=snsapi_userinfo&state=test#wechat_redirect'  //生产
          }
        window.location.href = url;
      }else{
        // 测试
        let url;
        if (this.env == 'test'){ // 测试
          url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxe320359a5af696ca&redirect_uri=https://easyget.vip/&response_type=code&scope=snsapi_userinfo&state=test#wechat_redirect' //测试
        }else{
          url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx2f6f4717a5418aba&redirect_uri=https://jttdshgc.com/&response_type=code&scope=snsapi_userinfo&state=test#wechat_redirect'  //生产
        }
        window.location.href = url;
      }
      localStorage.setItem("isFirst",'true');
    },
    userLogin() {  
      if(this.phone == ''){
        this.$toast('请输入手机号')
        return false;
      }else{
        let myreg=/1\d{10}/;
          if (!myreg.test(this.phone)) {  
              this.$toast('请输入有效的手机号');
              return false;
          }
      }
      if(this.password == ''){
        this.$toast('请输入密码')
        return false;
      }else{
        if(this.password.length < 6){
          this.$toast('密码长度至少为6位')
          return false;
        }
      }
      this.$api.login.userLogin({   
          Phone: this.phone,
          Password:this.password,
          UserType:this.userType  
      }).then(res=> {
        if(res.IsSuccess){
          localStorage.setItem("userType",this.userType);
          localStorage.setItem("userPhone",this.phone);
          localStorage.setItem("authorization",res.Data);
          this.$router.push({path:'/mine',query:{isHidden:false,isPhoneLogin:true}});
        }
      })    
    },
    getUrlParam(name){
      //构造一个含有目标参数的正则表达式对象  
      var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");  
      //匹配目标参数  
      var r = window.location.search.substr(1).match(reg);  
      //返回参数值  
      if (r!=null) return unescape(r[2]);  
      return null;  
    } 
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.login {
  background-color: #f5f5f5;
  .van-nav-bar__title {
    color: #fff;
  }
  .login-com {
    padding: .533333rem;
  }
  .user-pic-row {
    margin-top: 1.6rem;
    padding-bottom: 1.066667rem;
    text-align: center;
  }
  .user-pic {
    border-radius: 6px;
    height: 2.133333rem;
    width: 2.133333rem;
  }
  .login-btn-row {
    text-align: center;
    .login-btn {
      width: 100%;
      margin-top: .533333rem;
      border-radius: .106667rem;
    }
  }
}
.re-btn{
  border: 0;
    background-color: transparent;
    color: #999;
    height: auto;
    line-height: 36px;
    padding: 0;
}
</style>